<%@ page pageEncoding="UTF-8"%>

<%@ taglib uri="/tags/struts-tiles" prefix="tiles"%>
<%@ taglib uri="/tags/struts-html" prefix="html"%>
<%@ taglib uri="/tags/struts-logic" prefix="logic"%>
<%@ taglib uri="/tags/struts-nested" prefix="nested"%>
<%@ taglib uri="/tags/struts-bean" prefix="bean"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/tags/trymore" prefix="tm"%>

<script type="text/javascript">
	function after_save(json) {
		DWZ.ajaxDone(json);
		var currentPanel = $(navTab.getCurrentPanel());
		if ($("#_var_dictype", currentPanel).size() > 0) {
			var dict_type = $("#_var_dictype", currentPanel).val();
			$("#datagrid_dict_item").loadUrl("app/system/dict.do?action=actionLoadDictDataGrid&type=" + dict_type, {}, function(){
				$.pdialog.closeCurrent();
			});
		}
	}
	
	function multipleProcess (from_selector, target_selector) {
		var selectedOptions = $("#" + from_selector).find("option:selected");
		if ($(selectedOptions).length > 0) {
			$.each($(selectedOptions), function(){
				$("#" + target_selector).append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
				$(this).remove();
			});
		}
	}
	
	function validateInput (form) {
		var $form = $(form);
		
		if ($("#groupName").val() == "") {
			alertMsg.error("请给项目组起个名字吧...");
			$("#groupName").focus();
			return false;
		}
		
		if ($("#leaderSelectors").find("option").length == 0) {
			alertMsg.error("一个项目如果没有军官,军心会散的,选个组长吧...");
			$("#leaderCandidates").focus();
			return false;
		}
		
		if ($("#memberSelectors").find("option").length == 0) {
			alertMsg.error("一个项目如果没成员,组长就成光头司令了,添置点成员吧.");
			$("#memberCandidates").focus();
			return false;
		}
		
		var leaders = "";
		$.each($("#leaderSelectors").find("option"), function(){
			leaders = leaders + $(this).val() + ",";
		});
		
		var members = "";
		$.each($("#memberSelectors").find("option"), function(){
			members = members + $(this).val() + ",";
		});
		
		var formInput = $form.serializeArray();
		formInput.push({name: "leaders", value: leaders});
		formInput.push({name: "members", value: members});
		
		$.ajax({
			type: form.method || 'POST',
			url:$form.attr("action"),
			data:formInput,
			dataType:"json",
			cache: false,
			success: function(json) {
				$.pdialog.closeCurrent();
				navTab.reload();
			},
			error: DWZ.ajaxError
		});
		
		return false;
	}
	
	$(function(){
		$("#addLeader").click(function(){ multipleProcess("candidates", "leaderSelectors"); });
		$("#removeLeader").click(function(){ multipleProcess("leaderSelectors", "candidates"); });
		$("#addMember").click(function(){ multipleProcess("candidates", "memberSelectors"); });
		$("#removeMember").click(function(){ multipleProcess("memberSelectors", "candidates");});
	});
	
</script>

<div class="pageContent">
	<form method="post" action="app/system/group.do?action=actionSaveGroup" 
		class="pageForm required-validate" onsubmit="return validateInput(this);" id="formGroup">
		<div class="pageFormContent" layoutH="56">
			<table cellspacing="10" cellpadding="10" class="dform">
				<tr>
					<td width="100px">项目组名：</td>
					<td colspan="3"><input name="groupName" id="groupName" type="text" size="30" value="${entity ne null ? entity.groupName : ''}" class="required" style="width: 98%" /></td>
				</tr>
				<tr>
					<td width="100px" style="vertical-align: top">项目组长：</td>
					<td width="100px" rowspan="2">
						<select id='candidates' multiple='multiple' size='13' style="width:150px;">
							<logic:present name="users">
								<logic:iterate name="users" id="user">
									<c:if test="${!(tm:inRange(entity.groupLeaderIds,user.id,',') || tm:inRange(entity.groupMemberIds,user.id,','))}">
										<option value="${user.id}">${user.username}</option>
									</c:if>
								</logic:iterate>
							</logic:present>
						</select>
					</td>
					<td width="50px" >
						<div style="overflow:hidden; margin: 5px 0"><a class="button" href="javascript:void(0);" id="addLeader"><span>添加</span></a></div>
						<div style="overflow:hidden; margin: 5px 0"><a class="button" href="javascript:void(0);" id="removeLeader"><span>移除</span></a></div>
					</td>
					<td width="100px">
						<select id='leaderSelectors' name="leaders" multiple='multiple' size='6' style="width:150px;" class="required">
							<logic:present name="entity">
								<logic:present name="users">
									<logic:iterate name="users" id="user">
										<c:if test="${tm:inRange(entity.groupLeaderIds,user.id,',')}">
											<option value="${user.id}">${user.username}</option>
										</c:if>
									</logic:iterate>
								</logic:present>
							</logic:present>
						</select>
					</td>
				</tr>
				<tr>
					<td width="100px" style="vertical-align: top">项目成员：</td>
					<td width="50px" >
						<div style="overflow:hidden; margin: 5px 0"><a class="button" href="javascript:void(0);" id="addMember"><span>添加</span></a></div>
						<div style="overflow:hidden; margin: 5px 0"><a class="button" href="javascript:void(0);" id="removeMember"><span>移除</span></a></div>
					</td>
					<td width="100px">
						<select id='memberSelectors' name="members" multiple='multiple' size='6' style="width:150px;" class="required">
							<logic:present name="entity">
								<logic:present name="users">
									<logic:iterate name="users" id="user">
										<c:if test="${tm:inRange(entity.groupMemberIds,user.id,',')}">
											<option value="${user.id}">${user.username}</option>
										</c:if>
									</logic:iterate>
								</logic:present>
							</logic:present>
						</select>
					</td>
				</tr>
			</table>
		</div>
		
		<div class="formBar">
			<ul>
				<li>
					<div class="buttonActive"><div class="buttonContent"><button type="submit">保存</button></div></div>
				</li>
				<li>
					<div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div>
				</li>
			</ul>
		</div>
		<input type="hidden" name="id" value="${entity ne null ? entity.id : '-1'}" />
	</form>
</div>